<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <li v-for="(item,index) in navlist" :key="index">
        <router-link :to="{path:item.path}">{{item.text}}</router-link>
      </li>
      <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
      //1  准备
      const Home = {
        name: 'home',
        template: `<div>{{msg}}</div>`,
        data() {
          return {
            msg: 'home组件'
          }
        }
      }
      const Fenlei = {
        name: 'fenlei',
        template: `<div>{{msg}}</div>`,
        data() {
          return {
            msg: 'fenlei组件'
          }
        }
      }
      // 2.配置路由规则
      var routes = [
        { path: '/home', component: Home, name: 'home', alias: 'homes' },
        { path: '/fenlei', component: Fenlei }
      ]
      // 3.创建路由对象
      var router = new VueRouter({
        routes
      })
      // 4.把路由挂在到实例
      var vm = new Vue({
        data() {
          return {
            navlist: [
              { path: '/home', text: '主页' },
              { path: '/fenlei', text: '分类' }
            ]
          }
        },
        router
      }).$mount('#app')
    </script>
  </body>
</html>
